<template>
	<view class="root pt-30">
		<navigator
			v-for="(notice, index) in notices.list"
			:key="index"
			:style="{ margin: `0 30rpx 30rpx` }"
			:url="`/pages/common/Webview?url=${createUrl(notice.id)}`"
		>
			<text class="fs-24 color-999 text-center">{{ notice.time }}</text>

			<view
				:style="{
					boxShadow: '0 0 8rpx 0 rgba(0, 0, 0, 0.1)',
					padding: '36rpx 30rpx',
				}"
				class="mt-30 br-24"
			>
				<label class="jc-sb">
					<text class="fs-34 color-1b1b1b">{{ notice.title }}</text>
					<uni-icons type="arrowright" color="#999" />
				</label>
				<text class="fs-24 color-999 ellipsis mt-20">
					{{ notice.description }}
				</text>
			</view>
		</navigator>
		<uni-load-more :status="loadStatus" />
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniLoadMore from "@/components/uni-load-more.vue";
	import uniIcons from "@/components/uni-icons.vue";
	import { Pager } from "@/common/type";
	import { Storage } from "@/libs/utils";
	import { $config } from "@/common";

	let requestFlag: boolean = false;
	@Component({ components: { uniLoadMore, uniIcons } })
	export default class Notice extends Vue {
		// component property
		notices: Pager<AnyObject> = {
			page: 1,
			size: 10,
			list: [],
		};
		loadStatus: string = "loading";
		createUrl(id: number): string {
			const { online, path } = $config;
			const url = encodeURIComponent(
				`http${online.isSecureProtocol ? "s" : ""}://${online.host}${
					online.port.api ? ":" + online.port.api : ""
				}/richText.html?id=${id}&authorization=${
					Storage.get("authorization")?.access_token
				}#${path.api_prefix}/news/show`
			);
			return url;
		}
		onReachBottom() {
			this.getListData();
		}

		onLoad() {
			this.getListData();
		}
		getListData() {
			const { $request, notices } = this;
			if (requestFlag || !notices.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/news/list", { id: 1, size: 30 })
				.then(({ data }) => {
					notices.list.push(...data.list);
					notices.page =
						+data.page * notices.size < data.total ? ++data.page : 0;
					this.loadStatus = notices.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>